<template>

  <el-container style="overflow: hidden; height: 98vh">
    <el-header style="display: flex; justify-content: space-between; height: 6vh; align-items: center">
      <div style="flex: 1; display: flex; justify-content: center">IMU轨迹展示</div>
      <div class="beginButton">
        <el-button style="width: 100px; " @click="changeSwitch">{{ switchStr }}</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside style="width: 200px">
        <el-input
            v-model="contextContent"
            :autosize="{ minRows: 2 }"
            type="textarea"
        />
        <el-row>
          <el-upload
              :show-file-list="false"
              :before-upload = "handleFileSelect"
          >
            <el-button type="primary" style="margin: 20px">上传</el-button>
          </el-upload>
          <el-button type="primary" style="margin: 20px" @click="copyToClipboard">复制</el-button>
        </el-row>

      </el-aside>
      <el-main class="imageContent"><el-image :src="imageContent" class="imageContent"></el-image></el-main>
    </el-container>
  </el-container>

</template>

<script>
import {computed, ref} from "vue";
import axios from "axios";

export default {
  mounted() {
    this.initWebSocket()
  },
  setup() {
    const BlankImage = ''
    const isStart = ref(false)
    const imageContent = ref(BlankImage)
    const contextContentValue = ref("")
    const contextContent = ref("")
    const selectedImage = ref(null)
    const switchBegin = ref(true)
    const switchStr = computed(()=>{
      if (switchBegin.value){
        return "开始"
      } else {
        return "停止"
      }
    })

    function changeSwitch(){
      switchBegin.value = !switchBegin.value
      if (switchBegin.value){
        imageContent.value = BlankImage
      }
    }

    function handleFileSelect(image, fileList) {
      selectedImage.value = image
      console.log(selectedImage.value)
      getBase64(image)
    }
    const toggleStartStop = () => {
      isStart.value = !isStart.value
    }
    const copyToClipboard = () => {
      navigator.clipboard.writeText(contextContent.value)
          .then(() => {
            console.log('文本已成功复制到剪贴板');
          })
          .catch((error) => {
            console.error('复制到剪贴板失败:', error);
          });
    }

    function getBase64(file) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
          imageContent.value = reader.result

          const formData = new FormData();
          console.log(imageContent.value)
          formData.append('inputImage', imageContent.value);

          // 识图
          axios.post("http://localhost:30603/uploadImage", formData
          ).then( response => {
            console.log("success")
          }).catch(error => {
            console.log("error")
          })
        }
    }


    function compareAndChange(valueObject, refObject, value) {
      if (valueObject.value !== value) {
        valueObject.value = value
        refObject.value = value
      }
    }

    function webSocketOnMessage(event){
      if (switchBegin.value){
        const data = JSON.parse(event.data)
        console.log("on message: " + data.result)
        console.log("on message: " + data.image)
        compareAndChange(contextContentValue, contextContent, data.result)
        imageContent.value = data.image
      }
    }
    function webSocketOnOpen(){
      console.log("on open");
    }
    function webSocketOnError(){
      console.log("on error");
    }
    function webSocketOnClose(){
      console.log("on close");
    }
    function initWebSocket(){
      const wsUri = "ws://localhost:30603/websocket";
      this.webSocket = new WebSocket(wsUri);
      this.webSocket.onmessage = webSocketOnMessage;
      this.webSocket.onopen = webSocketOnOpen;
      this.webSocket.onerror = webSocketOnError;
      this.webSocket.onclose = webSocketOnClose;
    }

    return {
      isStart,
      imageContent,
      contextContent,
      selectedImage,
      switchStr,

      toggleStartStop,
      copyToClipboard,
      initWebSocket,
      handleFileSelect,
      changeSwitch
    }
  },
}
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

.imageContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.beginButton{
  display: flex;
  justify-content: flex-end;
  height: 6vh;
  align-items: center
}

</style>